Riveでアニメーションを作成してFlutterで使ってみた

sora

2024.08.06

こんにちは、ゲームソリューション部のsoraです。
今回は、Riveでアニメーションを作成してFlutterで使ってみたことについて書いていきます。

実装した画面

Riveで作成したファイルとアニメーションを指定して、Flutterで動かしているアプリです。
sr-rive-fist-flutter01

Riveとは

Riveは、インタラクティブな2Dアニメーションを作成できるデザインツールです。
Android・iOS・FlutterなどのネイティブアプリやJavaScript(Web)、Unityなどとも連携が可能です。
有料版だけでなく無料版もあります。
公式ページ
https://rive.app/
DevelopersIOの記事

Riveでのアニメーション作成

まずは公式ページからサインインします。
https://rive.app/
余談ですが、ボタンにカーソルを合わせると色々とアニメーションが動くのがすごくて楽しかったです。
sr-rive-fist-flutter02
sr-rive-fist-flutter03

サインインした後、NewFileから新しくファイルを作成します。
sr-rive-fist-flutter04

操作について、細かい機能は触っていないため、今回触った部分のみ解説します。
まず右上のDesignで図形の配置などをして、Animateにて図形を動かすアニメーションを作成します。
左上に図形の配置やテキストの追加などをするボタンがあります。
まずDesignを選択して、中心に円、周りに円や正方形を配置してみました。
sr-rive-fist-flutter05
sr-rive-fist-flutter06

次に、円を中心に周りに配置した図形を動かしてみます。
Animateを選択して、タイムラインの中で各秒数での図形の位置を指定します。
今回だと0秒・0.5秒・1秒のそれぞれの点で図形の位置を指定していて、その位置の間を動くようなものにしています。
sr-rive-fist-flutter07

Riveでアニメーションが作成できたため、最後にExportをしてrivファイルを出力します。

Flutterで使用する主なパッケージ

https://pub.dev/packages/rive/install
使用したバージョン：0.13.12
Riveで作成したアニメーションを使用するためのパッケージ
他パッケージと同様で、pubspec.yamlに記述してインストールしておきます。

FlutterへのRiveアニメーションの実装

今回の主要なファイルのディレクトリ構成は以下です。

.
├─assets
│  └─animations
│      └─untitle.riv
│─lib
│  └─main.dart
└─pubspec.yaml

Flutterのコードは以下です。
RiveAnimation.assetで、使用するrivファイルとアニメーションを指定しています。
この一文のみでRiveのアニメーションを動かすことができます。

main.dart

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget   {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.lightBlueAccent),
          useMaterial3: true,
      ),
      home: MyPage(),
    );
  }
}

class MyPage extends StatelessWidget {
  const MyPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Riveテスト'),
      ),
      body: Container(
        // Riveのファイルとアニメーションを指定
        child: RiveAnimation.asset(
          'assets/animations/untitled.riv',
          animations: ['Timeline 1'],
        ),
      ),
    );
  }
}

実行

冒頭に貼ったものと同じですが、Flutterを実行してAndroid Studioで録画したものが以下です。
不規則な動作に見える部分がありますが、そちらは録画時のgifの切れ目であり、実際は規則的な動きをしています。
sr-rive-fist-flutter01
Flutter側で、rivファイルからコンポーネントを取得して、コンポーネントに合わせて画像を動かすみたいなこともできるみたいなので、今後機会があればやってみようと思います。